<template>
  <uni-nav-bar
    title="智谦科技"
    backgroundColor="#34D399"
    color="#fff"
    statusBar
    fixed
    v-show="navShow"
  ></uni-nav-bar>

  <view class="page">
    <image
      src="@/static/cs/homeTop/top-bg.png"
      mode="widthFix"
      class="absolute w-full top-0 left-0"
    />

    <!-- 这里可以放logo或者其他文字,目前用来演示渐变文字 -->

    <text class="homeTitle">智谦科技</text>
    <text class="homeTitle">{{ env }}---- {{ platform }}</text>

    <view class="homeSearch">
      <uni-icons type="search" size="18" color="#fff" class="mr-2" />
      <text>搜索你喜欢的内容</text>
    </view>

    <!-- 轮播图 -->
    <view class="mx-6">
      <uni-swiper-dot :info="swiperInfo" :current="current" field="content" :mode="'nav'">
        <swiper class="homeSwiper" @change="changeSwiper" :autoplay="true" :circular="true">
          <swiper-item v-for="(item, index) in swiperInfo" :key="index">
            <view>
              <image :src="item.imgUrl" class="homeSwiper" />
            </view>
          </swiper-item>
        </swiper>
      </uni-swiper-dot>
    </view>

    <!-- 消息提醒 -->
    <view class="w-screen">
      <uni-notice-bar showIcon single :text="noticeText" scrollable></uni-notice-bar>
    </view>

    <!-- 热门资讯 -->
    <view class="hotNews">
      <view class="hotTitle">
        <text class="title">热门资讯</text>
        <view class="subTitle">
          查看更多
          <uni-icons type="right" :size="14" class="-ml-1" />
        </view>
      </view>
      <scroll-view scrollX>
        <view class="hotList">
          <uni-card
            class="listCard"
            v-for="(item, index) in 10"
            :key="index"
            padding="0"
            spacing="0"
            margin="'8px'"
          >
            <image src="@/static/logo.png" class="w-full h-20" />
            <view class="mask">
              嘿，兄弟！我们好久不见你在哪里 嘿，朋友，如果真的是你，请打招呼！
            </view>
            <view class="newsInfo">
              <view class="info">别对着我笑，没人会在乎 别对着我哭，没人会无助</view>
              <view class="detail">
                <view class="viewNumber">6000人查看</view>
                <view class="viewAction">
                  查看
                  <uni-icons type="eye" :size="14" class="-ml-1" />
                </view>
              </view>
            </view>
          </uni-card>
        </view>
      </scroll-view>
    </view>
    <!-- 首页列表tab-->
    <view class="m-3">
      <scroll-view :scroll-x="true" class="tabList" :scroll-into-view="toTab">
        <view
          v-for="(tab, index) in tabItems"
          :key="index"
          class="tabItem"
          @click="changeTab(index)"
          :id="'tab' + index"
        >
          <text class="tabTitle" :class="currentTab == index ? 'currentTab' : ''">
            {{ tab }}
          </text>
        </view>
      </scroll-view>
      <!-- 首页列表 -->
      <swiper class="homeList" @change="changeTabSwiper" :current="currentTab">
        <swiper-item v-for="(tabs, i) in tabItems" :key="i">
          <scroll-view scroll-y @scrolltolower="loadList(i)" class="homeList mb-2">
            <uni-list>
              <uni-list-item
                :title="tabs + '-----' + (index + 1)"
                note="Dcloud 128评论 21 赞"
                :ellipsis="2"
                v-for="(item, index) in listCs[i]"
                :key="index"
              >
                <template v-slot:header>
                  <view>
                    <image src="/static/logo.png" class="list-image mr-6" lazy-load></image>
                  </view>
                </template>
              </uni-list-item>
            </uni-list>
            <uni-load-more :status="loadStatus[i]"></uni-load-more>
          </scroll-view>
        </swiper-item>
      </swiper>
    </view>
  </view>
</template>

<script setup lang="ts">
import { useUserStore } from '@/store/modules/user'

const { nickName } = storeToRefs(useUserStore())
// 环境
const env = ref(process.env.NODE_ENV)
// 平台
const platform = ref(process.env.UNI_PLATFORM)
onLoad(() => {
  console.log(nickName.value, 'page load')
})

onShow(() => {
  console.log(nickName.value, 'page show')
})

// narBar在滚动到某个位置再显示
const navShow = ref(false)
onPageScroll(res => {
  const top = res.scrollTop
  if (top > 450) {
    navShow.value = true
  } else {
    navShow.value = false
  }
})

// 轮播图
const current = ref(0)
const swiperInfo = reactive([
  { imgUrl: '/static/cs/swiper/swiper1.png', content: '悟来时见江海古' },
  { imgUrl: '/static/cs/swiper/swiper2.png', content: '苍崖行遍谒玄门' },
  { imgUrl: '/static/cs/swiper/swiper3.jpg', content: '向道偶题人间世' },
  { imgUrl: '/static/cs/swiper/swiper4.jpg', content: '一笛一剑一昆仑' },
])
const changeSwiper = (e: any) => {
  current.value = e.detail.current
}

// notice通知
const noticeText = ref('莫听穿林打叶声，何妨吟啸且徐行。竹杖芒鞋轻胜马，谁怕？一蓑烟雨任平生。')

// list的tab
const currentTab = ref(0)
const toTab = ref('tab0')
const tabItems = reactive(['全部', '推荐', '热点', '网络技术', '产品运营', '热销经营', '赛博朋克'])
const changeTab = (index: number) => {
  switchTab(index)
}
const changeTabSwiper = (e: any) => {
  switchTab(e.detail.current)
}
const switchTab = (index: number) => {
  if (currentTab.value === index) return
  toTab.value = 'tab' + index
  currentTab.value = index
}
const listCs = reactive([10, 10, 10, 10, 10, 10, 10])
const loadStatus = reactive(['more', 'more', 'more', 'more', 'more', 'more', 'more'])
const loadList = (index: number) => {
  if (loadStatus[index] !== 'more') return
  loadStatus[index] = 'loading'
  setTimeout(() => {
    listCs[index] += 10
    loadStatus[index] = listCs[index] === 30 ? 'no-more' : 'more'
  }, 100)
}
</script>

<style lang="scss" scoped>
.page {
  @apply relative mb-2 pt-10;
}
.homeTitle {
  // tailwind官方的bg-clip-text text-transparent 在小程序上无效,所以新增了text-gradient的配置
  @apply relative font-bold text-gradient bg-gradient-to-br from-orange-400 via-red-500 to-blue-900  mx-5 inline-block text-sm;
}

.homeSearch {
  @apply relative m-4 h-8 bg-white bg-opacity-20 rounded-full flex justify-center items-center text-white text-sm;
}
.homeSwiper {
  @apply w-full h-40 rounded-lg;
}

.hotNews {
  .hotTitle {
    @apply flex justify-between items-baseline mb-3 mx-6;
  }
  .hotList {
    width: 3600rpx;
    @apply flex justify-between mx-3;
    .listCard {
      @apply relative;
      .mask {
        @apply absolute w-full left-0 top-10 h-10 bg-black bg-opacity-20 line-clamp-2 text-white px-2 box-border;
      }
      .newsInfo {
        @apply mx-1;
      }
      .info {
        @apply line-clamp-1 text-base font-semibold text-gray-900;
      }
      .detail {
        @apply flex justify-between h-5 mb-2;
        .viewAction {
          @apply bg-yellow-400 rounded-full  w-11 px-2;
        }
      }
    }
  }
}

.tabList {
  @apply whitespace-nowrap  border-0 border-b-2 border-gray-100 border-solid;
  .tabItem {
    @apply inline-block mb-1 mr-4 pl-4 box-border;
    .tabTitle {
    }
    .currentTab {
      @apply text-xl font-extrabold tracking-tight text-gray-900  border-0 border-b-4 border-green-400 border-solid;
    }
  }
}
.homeList {
  // 外层包了m-3,所以利用tailwind的theme函数进行计算保证严谨
  width: calc(100vw - theme('margin[3]') * 2);
  height: calc(100vh - 265rpx);
  // #ifdef H5
  height: calc(100vh - 295rpx);
  //  #endif
  .list-image {
    width: 150rpx;
    height: 150rpx;
  }
}
</style>
